<template>
  <div class="about-us"  :style="{backgroundImage: `url(${imageUrl}/img/ft2/guanyuwomen.jpg)`}">
    <nav-bar class="nav-bar-position">关于我们</nav-bar>
    <white-space/>
    <div class="about-us-detail">
      <parser :html="aboutUs.content"></parser>
      <!--      <ul>-->
      <!--        {{ version.instructions }}-->
      <!--      </ul>-->
    </div>
  </div>
</template>

<script>
  import { mapActions, mapState } from 'vuex';
  import Parser from "../../component/parser/index";
  import { imageUrl } from "../../api/url.config";

  export default {
    name: "about-us",
    components: { Parser },
    data(){
      return{imageUrl}
    },
    computed: mapState('User', ['aboutUs']),
    methods: mapActions('User', ['reqAboutUs']),
    onShow() {
      this.reqAboutUs({ name: '关于我们' })
    }
  }
</script>

<style lang="scss" scoped>
  .about-us {
    $padding: 30;

    @include bg;
    min-height: 100vh;
    background: {
      size: upx(750);
      position-y: $status_bar;
      repeat: no-repeat;
    };

    .check {
      padding: upx(380) 0 upx(30);
    }

    .time {
      width: upx(590 - $padding * 2);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: upx($padding);
      border-bottom: upx(1) solid #EDF2F3;
      margin: 0 auto;

      .version-num {
        @include ft(30, #5D6473, 500)
      }

      .update-time {
        @include ft(30, #9096A3, 500)
      }
    }

    &-detail {
      width: upx(590 - $padding * 2);
      margin: upx(410) auto;
      @include ft(28, #5D6473, 400);
      line-height: 2.2em;
    }
    .my-img {
      .img {
        width: upx(750);
      }
    }
  }
</style>
